<template>
	<view>
		<view class="uni-flex-center" v-for="(item,index) in list" :key="index" @click="detail(item)">
			<view class="notice-card">
				<view class="image">
					<image style="width: 110px;height: 110px;" :src="item.cover" mode="aspectFill"></image>
				</view>
				<view class="content">
					<view class="header uni-ellipsis">{{item.name}} </view>
					<view class="content">
						{{item.content}}
					</view>
					<view class="foot">{{item.createTime}}</view>
				</view>
			</view>
		</view>
		<view class="uni-empty" v-if="list.length === 0">
			暂无小区公约数据
		</view>
	</view>
</template>
<script>
	import {
		queryAll
	} from '@/api/information.js'
	export default {
		data() {
			return {
				list: [],
				type: 2,
				page: 1,
				limit: 10,
			};
		},
		onReachBottom: function() {
			// console.log('我触底了要加载数据了: ' + JSON.stringify('我触底了要加载数据了'));
		},
		methods: {
			detail(item) {
				this.$Router.push({
					name: 'agree-detail',
					params: {
						id: item.id
					}
				})
			},
			getList() {
				queryAll(this.type).then(res => {
					console.log(res);
					this.list = res;
				})
			}
		},
		onLoad() {
			this.getList()
		}
	};
</script>

<style>
	.notice-card {
		background: #ffffff;
		border-radius: 10upx;
		margin: 20upx;
		width: 100%;
		height: 120px;
		display: flex;
	}

	.notice-card .image {
		width: 25%;
		margin: 5px 0px;
	}

	.notice-card .content {
		width: 75%;
		height: 100%;
	}

	.notice-card .content .header {
		float: left;
		height: 25%;
		padding-left: 10upx;
		margin-left: 10px;
		border-left: 8upx solid #007aff;
		overflow: hidden;
	}


	.notice-card .content .content {
		width: 100%;
		height: 55%;
		font-size: 20upx;
		color: #898989;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 6;
		-webkit-box-orient: vertical;
	}

	.notice-card .content .foot {
		height: 25%;
		color: #898989;
		font-size: 20upx;
		text-align: right;
	}
</style>
